@import "variables.less";

@import (css) "@{node_modules}/@fontsource/roboto/400.css";
@import (css) "@{node_modules}/@fontsource/roboto/500.css";

@import "blocks/_icons.less";
@import "blocks/_links.less";
@import "blocks/_list.less";
@import "blocks/_tables.less";
@import "blocks/_typography.less";

// Antd 5 doesn't set box-sizing: border-box as Antd 4, but we rely on it.
div.dijitTabPane,
table.dijitSelect {
    box-sizing: border-box;
}

/* -- BASE STYLES -- */

body,
html {
    height: 100%;
    font-family: var(--ngw-text-font-family-list);
}

body {
    margin: 0;
    min-width: 680px;
    color: var(--text-base);
    font-size: 14px;
    line-height: 1.55;
}

*:focus {
    outline: none;
}

/* -- Icons --*/
[class^="icon-"],
[class*=" icon-"] {
    text-decoration: none;

    &:before {
        margin-right: 0;
        margin-left: 0;
        color: inherit;
    }
}

a:hover [class^="icon-"]:before,
a:hover [class*=" icon-"]:before,
a[class^="icon-"]:hover:before,
a[class*=" icon-"]:hover:before {
    color: var(--primary);
}

.middle-text {
    font-weight: bold;
    font-size: 16px;
}

.label-text {
    margin-right: 5px;
}

/* -- Layout -- */

.ngw-pyramid-layout {
    display: flex;
    position: relative;
    flex-direction: column;
    min-width: 680px;
    min-height: 100%;

    > .ngw-pyramid-layout-crow {
        display: flex;
        flex-grow: 1;
        margin: 0;
        padding: 0;

        > .ngw-pyramid-layout-mwrapper {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: stretch;
            min-width: 0;

            > .ngw-pyramid-layout-main {
                display: flex;
                flex-grow: 1;
                flex-direction: column;
                gap: 6px;
                box-sizing: border-box;
                padding: 24px 12px 12px 12px;
                max-width: 1000px;

                > .ngw-pyramid-layout-bcrumb {
                    color: var(--text-secondary);

                    > span {
                        &::before {
                            vertical-align: 30%;
                            opacity: 0.5;
                            margin: 0 4px;
                            content: "●";
                            font-size: 6px;
                        }

                        &:first-child::before {
                            display: none;
                        }

                        > a {
                            color: inherit;
                            text-decoration: none;

                            &:hover {
                                color: var(--link-hover-color);
                            }

                            > svg.icon {
                                opacity: 0.75;
                            }
                        }
                    }
                }

                h1.ngw-pyramid-layout-title {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin: 0 0 12px 0;
                    min-height: 40px;

                    & > *:not(.ant-btn) {
                        font-weight: initial;
                        font-size: initial;
                    }

                    &.pull-right > *:first-child {
                        margin-left: auto;
                    }
                }
            }
        }
    }

    &.ngw-pyramid-layout-hstretch {
        > .ngw-pyramid-layout-crow
            > .ngw-pyramid-layout-mwrapper
            > .ngw-pyramid-layout-main {
            max-width: 100%;
        }
    }

    &.ngw-pyramid-layout-vstretch {
        > .ngw-pyramid-layout-crow
            > .ngw-pyramid-layout-mwrapper
            > .ngw-pyramid-layout-main
            > .content {
            flex-grow: 1;
            min-height: 400px;

            > * {
                box-sizing: border-box;
            }
        }
    }
}

/* -- Header --*/

.ngw-pyramid-layout-header {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--divider-color);
    padding: 5px 5px;
    min-width: 0;
    min-height: 50px;

    &::before {
        position: absolute;
        opacity: 0.1;
        z-index: -1;
        inset: 0;
        background-color: var(--primary);
        content: "";
    }

    > a {
        display: flex;
        flex-shrink: 1;
        justify-content: center;
        box-sizing: content-box;
        min-width: 40px;

        > img {
            display: block;
        }
    }

    > div.text {
        flex-grow: 1;
        color: var(--primary);
        font-weight: var(--ngw-head-font-weight);
        font-size: 16px;
        font-family: var(--ngw-head-font-family-list);
    }

    > div.container {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        min-height: 32px;
    }
}

/* -- CONTENT STYLES -- */

.ngw-card {
    border: 1px solid #f0f0f0;
    border-radius: var(--border-radius-root);
    background: white;
}

.ngw-resource-section {
    margin-bottom: 32px;
}

.content-box {
    position: relative;
    margin-bottom: 32px;
    border: 1px solid #f0f0f0;
    border-radius: var(--border-radius-root);
    background: white;
    padding: 12px;

    & > p:first-child,
    & > p:last-child,
    & > div > p:first-child,
    & > div > p:last-child {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Sidebar */

.ngw-pyramid-layout-sidebar {
    position: relative;
    flex-shrink: 0.5;
    box-sizing: border-box;
    border-left: 1px solid var(--divider-color);
    background: white;
    padding: 24px 12px 24px 24px;
    width: 25%;
    min-width: 25ch;
}

.ngw-pyramid-dynmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;

    > li.label {
        margin: 24px 0 6px 0;
        border-bottom: 1px solid var(--divider-color);
        color: var(--text-secondary);
        font-weight: var(--ngw-text-font-weight);
        font-family: var(--ngw-head-font-family-list);
        text-transform: uppercase;

        &:first-child {
            margin-top: 0;
        }
    }

    > li.item {
        position: relative;
        padding-top: 3px;
        padding-bottom: 3px;

        &:after {
            position: absolute;
            top: 0;
            top: 0;
            bottom: 0;
            left: -24px;
            opacity: 0;
            background-color: var(--primary);
            width: 3px;
            content: "";
        }

        &:hover {
            &:after {
                opacity: 1;
            }
        }

        &.selected {
            color: var(--primary);
            font-weight: bold;
        }

        > a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--on-sidebar-text);
            text-decoration: none;

            &:hover {
                color: var(--primary);
            }

            > svg.icon {
                width: 16px;
                height: 16px;
            }
        }
    }
}

.padding-block {
    padding: 8px;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0.6);
}

@import (css) "@{node_modules}/dijit/themes/claro/claro.css";
@import (css) "@{node_modules}/dgrid/css/skins/claro.css";
@import "override-claro.less";
@import "override-antd.less";

@import "include.less";
